<template>
  <client-only>
    <el-menu
      :default-active="activeMenu"
      class="max-w-[50vw] min-w-[20vw]"
      router
      mode="horizontal"
    >
      <template v-for="topMenu in menuData" :key="topMenu.path">
        <el-menu-item v-if="topMenu.children.length === 0" :index="'/' + topMenu.path">
          {{ topMenu.title }}
        </el-menu-item>
        <el-sub-menu :index="'/' + topMenu.path" v-else>
          <template #title>{{ topMenu.title }}</template>
          <template v-for="twoMenu in topMenu.children" :key="twoMenu.path">
            <el-menu-item
              v-if="twoMenu.children.length === 0"
              :index="'/' + topMenu.path + '/' + twoMenu.path"
            >
              {{ twoMenu.title }}
            </el-menu-item>
            <el-sub-menu v-else :index="'/' + topMenu.path + '/' + twoMenu.path">
              <template #title>{{ twoMenu.title }}</template>
              <template v-for="item in twoMenu.children" :key="item.path">
                <el-menu-item :index="'/' + topMenu.path + '/' + twoMenu.path + '/' + item.path">
                  {{ item.title }}
                </el-menu-item>
              </template>
            </el-sub-menu>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </client-only>
</template>

<script setup lang="ts">
  import setupMenu from './setupMenu'
  const activeMenu = ref('/collect')
  const router = useRouter()
  const route = useRoute()
  const menuData = ref(setupMenu(router))

  watch(
    () => route.path,
    (newValue) => {
      activeMenu.value = newValue
    },
    {
      immediate: true
    }
  )

  onUpdated(() => {
    menuData.value = setupMenu(router)
  })
</script>

<style scoped lang="less">
  .el-menu--horizontal.el-menu {
    border-bottom: none;
    height: 100%;
  }
  .el-menu--horizontal {
    & > .el-menu-item.is-active,
    :deep(.el-sub-menu.is-active .el-sub-menu__title) {
      border-bottom: none;
    }
  }
</style>
